<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步,引入样式库 -->
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
</head>

<body>
    <!-- 原生 -->
    <div>
        <button>按钮</button>
    </div>
    <!-- layui的按钮 -->
    <div>
        <button class="layui-btn">标准按钮</button>
        <button class="layui-btn layui-btn-primary">标准按钮</button>
        <button class="layui-btn layui-btn-danger">警告按钮</button>
        <button class="layui-btn layui-btn-disabled">禁止按钮</button>
    </div>

    <h1>表单</h1>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                    autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <!-- <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div> -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>水平导航菜单</legend>
    </fieldset>
    <ul class="layui-nav">
        <li class="layui-nav-item layui-this"><a href="">选中</a></li>
        <li class="layui-nav-item"> <a href="javascript:;">常规</a> </li>
        <li class="layui-nav-item"><a href="">导航</a></li>
        <li class="layui-nav-item"> <a href="javascript:;">子级</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="">菜单1</a>
                </dd>
                <dd>
                    <a href="">菜单2</a>
                </dd>
                <dd>
                    <a href="">菜单3</a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item"> <a href="javascript:;">选项</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="">选项1</a>
                </dd>
                <dd class="layui-this">
                    <a href="">选项2</a>
                </dd>
                <dd>
                    <a href="">选项3</a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">演示</a></li>
    </ul>

    <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">默认展开</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">选项1</a></dd>
                <dd><a href="javascript:;">选项2</a></dd>
                <dd><a href="">跳转</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
    </ul>



    <div class="layui-card">
        <div class="layui-card-header">卡片面板</div>
        <div class="layui-card-body">
            卡片式面板面板通常用于非白色背景色的主体内<br>
            从而映衬出边框投影
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">卡片面板</div>
        <div class="layui-card-body">
            卡片式面板面板通常用于非白色背景色的主体内
            从而映衬出边框投影
        </div>
    </div>


    <button type="button" class="layui-btn layui-btn-primary">按钮</button>

    <form class="layui-form" action="" lay-filter="testform">
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <span class="layui-breadcrumb" lay-separator="-">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>

    <!-- 提前引入js -->
    <script src="./layui-v2.6.8/layui/layui.js"></script>
    <!-- 表单用到js -->
    <script>
        //Demo
        layui.use('form,element', function () {
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>

</html>